<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<!-- 
		表格
			table 	表示表格
			tr 		表示表格中的行（每一行可以包含一个或多个td或th）
			td 		表示表格中的标准单元格
			th 		表示表格中的表头单元格（具有标题的效果，字体加粗，居中显示）
			
			table常用属性
				border 表格的边框
				width  表格的宽度 
					像素值或百分比（如果是百分比，参考的是上一级元素的宽度，如果上一次元素未设置，则参考屏幕宽度）
				height 表格的高度
				align  表格的对齐方式 （left、right、center）
				
			tr常用属性
				align   每行中文本内容的水平方向对齐方式（left、right、center）
				valign  每行中文本内容的垂直方向对齐方式
				bgcolor 设置行的背景颜色
				
				
			css样式
				border-collapse: collapse;	合并表格边框
				
				
				合并单元格
					<td>的colspan和rowspan分别规定单元格横跨的列数和行数
					纵向合并  rowspan
					横向合并  colspan
				
	 -->
	<body>
		<table border="1" width="500px" align="center" height="200px" style="border-collapse: collapse;">
			<tr>
				<th>班级</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
			<tr align="center" valign="top" bgcolor="antiquewhite">
				<td>101班</td>
				<td>张三</td>
				<td>18</td>
				<td>男</td>
			</tr>
			<tr align="left">
				<td>101班</td>
				<td>李四</td>
				<td>19</td>
				<td>女</td>
			</tr>
			<tr align="right">
				<td>102班</td>
				<td>王五</td>
				<td>20</td>
				<td>男</td>
			</tr>
		</table>
		
		<hr />
		
		<h3 align="center">纵向合并  rowspan</h3>
		<table border="1" width="500px" align="center" style="border-collapse: collapse;">
			<tr>
				<th>班级</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
			<tr align="center" >
				<td rowspan="2">101班</td>
				<td>张三</td>
				<td>18</td>
				<td>男</td>
			</tr>
			<tr align="center">
				<td>李四</td>
				<td>19</td>
				<td>女</td>
			</tr>
			<tr align="center">
				<td>102班</td>
				<td>王五</td>
				<td>20</td>
				<td>男</td>
			</tr>
		</table>
		
		<hr />
		
		<h3 align="center">横向合并  colspan</h3>
		<table border="1" width="500px" align="center" style="border-collapse: collapse;">
			<tr>
				<th colspan="2">班级+姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
			<tr align="center" >
				<td rowspan="2">101班</td>
				<td>张三</td>
				<td>18</td>
				<td>男</td>
			</tr>
			<tr align="center">
				<td>李四</td>
				<td>19</td>
				<td>女</td>
			</tr>
			<tr align="center">
				<td>102班</td>
				<td>王五</td>
				<td>20</td>
				<td>男</td>
			</tr>
		</table>
		
		
	</body>
</html>
